<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>模拟名字空间</h3>
		<ul>
			<li>名字空间可以将不同的变量、类型、函数等逻辑上封装开发，从而防止命名冲突</li>
			<button onclick="funcTest1()">运行例子</button>
		</ul>
		<script>
			var MyModule = MyModule || {};
			MyModule.data = "myModule中的数据";
			MyModule.f = function(){
				console.log("MyModule中的函数");
			};
			MyModule.Person = function(name, gender){
				this.name = name;
				this.gender = gender;
				MyModule.Person.prototype.toString = function(){
					return "name:" + name + ",gender:" + gender;
				}
			}
			
			function funcTest1(){
				//console.log(data);		// 错误，data并不在global名字空间中;
				console.log(MyModule.data);
				MyModule.f();
				var p = new MyModule.Person("jerry", "男");
				console.log(p.toString());
			}
		</script>
		
		<h3>编写和调用其它模块代码</h3>
		<ul>
			<li>在比较复杂的应用中，可将不同的代码编写到不同的js文件中，并通过IIFE封装起来</li>
			<li>每个代码块完成特定功能，并且通过名字空间防止命名冲突</li>
			<button onclick="funcTest2()">运行例子</button>
		</ul>
		<!-- 注意下列js文件的引用顺序 -->
		<script src="js/list.js"></script>
		<script src="js/employee.js" ></script>
		<script src="js/department.js" ></script>
		<script>
			function funcTest2(){
				var dept = new Models.Department(1, "技术部");
				dept.addEmployee("jerry", "男", "jerry@chinasofti.com");
				dept.addEmployee("jam", "女", "jam@chinasofti.com");
				dept.addEmployee("david", "男", "david@chinasofti.com");
				var employees = dept.getEmployees();
				var length = employees.length;
				for(var i=0;i<length;i++){
					console.log(employees[i].toString());
				}
			}
		</script> 
	</body>
</html>
